<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/layout/choushangguanli/yifanshang' }">一番赏列表</el-breadcrumb-item>
            <el-breadcrumb-item><a>添加一番赏</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="basicInfo" status-icon ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="盒子名称" prop="name">
                <el-input type="text" placeholder="请输入盒子名称" v-model="basicInfo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="玩法选择">
                <el-checkbox-group  :disabled="disable" v-model="basicInfo.raffle_counts">
                        <el-checkbox label="霸主模式"></el-checkbox>
                        <el-checkbox label="最终赏"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="抽奖按钮" prop="pass">
                      <el-checkbox-group  :disabled="disable" v-model="basicInfo.raffle_counts">
                       <el-checkbox label="抽一次"></el-checkbox>
                       <el-checkbox label="抽三次"></el-checkbox>
                       <el-checkbox label="抽五次"></el-checkbox>
                       <el-checkbox label="抽十次"></el-checkbox>
                       <el-checkbox label="全收"></el-checkbox>
                     </el-checkbox-group>
                </el-form-item>
            <el-form-item label="是否隐藏" prop="pass">
                    <template>
                        <el-radio :disabled="disable" v-model="basicInfo.is_hide" label="0">是</el-radio>
                        <el-radio :disabled="disable" v-model="basicInfo.is_hide" label="1">否</el-radio>
                    </template>
                </el-form-item>
                    <el-form-item label="盒子金额/赏币">
                    <el-input type="text" placeholder="请输入盒子名称" v-model="basicInfo.price" autocomplete="off"></el-input>
                </el-form-item> 
                <el-form-item label="盒子库存(套)" prop="name">
                    <el-input type="text" placeholder="请输入盒子名称" v-model="basicInfo.game_num" autocomplete="off"></el-input>
                </el-form-item>
                    <el-form-item label="排序" prop="sort">
                    <el-input :disabled="disable" type="text" placeholder="请输入排序" v-model="basicInfo.sort" autocomplete="off"></el-input>
                </el-form-item>
                    <el-form-item label="霸主模式时间" prop="name">
                    <el-input type="text" placeholder="请输入秒数" v-model="basicInfo.overlord_second" autocomplete="off"></el-input>秒
                </el-form-item>
                    <el-form-item label="全收数量" prop="name">
                    <el-input type="text" placeholder="请输入全收数量" v-model="basicInfo.n" autocomplete="off"></el-input>
                </el-form-item>
            <el-form-item label="封面图">
                <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview" ref="upload"
                    :on-change="uploadImg" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload">
                    <img class="el_upload_img" v-if="basicInfo.cover_url" :src="basicInfo.cover_url">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="basicInfo.cover_url" alt="" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import yifan from '../../../../api/jurisdiction'
export default {
    data() {
        return {
            disable:false,
            basicInfo: {
                raffle_counts:[]
            },
            dialogVisible: false,
            clasify: '',
            advertize: '',
            radio: '一番赏',//玩法模式
            jifen: '否',
            hide: '否',
            choushangCount: [],//抽赏数量
        }
    },
    created() {
        this.getEditInfo()
    },
    methods: {
        getEditInfo() {
            console.log(this.$route.params.id)
            if (this.$route.params.id) {
                yifan.getyifanshangInfo({ params:{
                    uuid: this.$route.params.id
                }}).then((res) => {
                    this.basicInfo = res.data.data
                    console.log('单个盒子信息',res)
                })
                this.disable = true
            }
        },
        submit() {
            var is_overlord = 0;
            this.basicInfo.raffle_counts.forEach(v => v == "霸主模式" ? is_overlord = 1 : is_overlord = 0)
            if (!this.$route.params.id) {
                if (this.basicInfo.cover_url) {
                yifan.postyifanshang({
                    name:this.basicInfo.name,
                    cover_url:this.basicInfo.cover_url,
                    price:this.basicInfo.price * 100,
                    pay_type:100,
                    raffle_counts:JSON.stringify(this.basicInfo.raffle_counts),
                    game_num:this.basicInfo.game_num - 0,
                    sort:this.basicInfo.sort - 0,
                    is_hide:this.basicInfo.is_hide - 0,
                    state: 0,
                    is_overlord,
                    overlord_second:this.basicInfo.overlord_second - 0
                }).then((res) => {
                    console.log(res)
                    this.$message.success("添加成功")
                    this.$router.push('/layout/choushangguanli/yifanshang')
                }).catch((err) => {
                    this.$message.warning("添加失败")
                })
            } else {
                this.$message.warning("图片上传中")
             }
            } else {
                yifan.putyifanshang({
                    game_uuid: this.$route.params.id,
                    name: this.basicInfo.name,
                    cover_url: this.basicInfo.cover_url,
                    price:this.basicInfo.price
                }).then((res) => {
                    console.log(res)
                    this.$message.success("修改成功")
                    this.$router.push("/layout/choushangguanli/yifanshang")
                }).catch(err => {
                    this.$message.warning("修改失败")
                })
            }
        },
        uploadImg(upFile) {
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/yifanshang/${num}.${newName[newName.length - 1]}`
            yifan.uploadImg({ "path": path }).then((res) => {
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                console.log(res)
                yifan.generalAPI(result.url, data).then((a) => {
                    yifan.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.cover_url = yunurl
                        this.$message.success("上传成功")
                        console.log('url', this.basicInfo.cover_url)
                    })
                })
            })
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {

        },
        handlePictureCardPreview(file) {
        },
    }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 400px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.el_upload_img {
    width: 170px !important;
    height: 170px !important;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-breadcrumb {
    margin-bottom: 20px;
}
</style>